<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>工作台</title>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="{% static '/mytest/plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">

    <script src="{% static '/mytest/js/jquery-3.7.0.min.js' %}"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="{% static '/mytest/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>

</head>
<body>

<!-- Container -->
<div id="container">
    <!-- Header -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="/mytest/workbench/">
                                <img alt="logo" style="width: 30px; height: 20px;"
                                     src="{% static '/mytest/images/logo.gif' %}">
                            </a>
                        </div>
                    </div>
                </nav>

                {#      <a class="navbar-brand" href="#">测试 工作台</a>#}
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="{% url 'mytest:admin_detail' %}">管理员账户</a></li>
                    <li><a href="{% url 'mytest:data_page' %}">部门管理</a></li>
                    <li><a href="{% url 'mytest:bug_page' %}">缺陷管理</a></li>
                    <li><a href="{% url 'mytest:pretty_list' %}">靓号管理</a></li>
                    <li><a href="{% url 'mytest:chart_list' %}">数据统计</a></li>
                    <li><a href="{% url 'mytest:user_list' %}">用户管理</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">欢迎你! {{ request.session.info.name }}<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{% url 'mytest:logout' %}">退出登陆</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!-- END Header -->
    <div class="breadcrumbs">
        <a href="/admin/">首页</a>
        ›
        <a href="/admin/auth/">认证和授权</a>
        ›
        <a href="/admin/auth/user/">用户</a>
        ›
        <a href="/admin/auth/user/1/change/">admin</a>
        › 修改密码
    </div>
    <div class="main shifted" id="main">
        <!-- Content -->
        <div id="content" class="colMS card" style="padding-top: 20px">
            <h2 class="card-title" style="padding-bottom: 20px">管理</h2>
            <div id="content-main">
                <div class="app-polls module">{% block mainbody %}{% endblock %}</div>
                <div class="app-auth module"></div>

            </div>
            <div id="content-related">
                <div class="module" id="recent-actions-module">
                    <h2></h2>
                </div>
            </div>
            <br class="clear">
        </div>
        <!-- END Content -->
        <div id="footer"></div>
    </div>
</div>
<!-- END Container -->


<!-- modalBox（general） 修改中-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">标题</h4>
            </div>
            <div class="modal-body">
                <form id="formData">
                    <div class="col-xs-12">
                        {% csrf_token %}
                        {% for field in data.form %}
                            {{ field.label_tag }}
                            {{ field }}
                            {#                            {{ field.errors.0 }}#}
                            <span class="error-msg" style="color: red;"></span><br>
                        {% endfor %}
                    </div>

                    {#                    <button type="submit" class="btn btn-primary">确认</button>#}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
                <button id="saveBtn" type="submit" class="btn btn-primary">确 认</button>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- END modalBox -->

<!-- jQuery 事件 -->
<script>

    var EDIT_ID;

    $(function () {
        bindBtnAddEvent();
        bindBtnSaveEvent();
        bindBtnEditEvent();
        {#bindBtnPageEvent();#}
        bindBtnDeleteEvent();
    });

    // 分页事件（自写，未使用）
    function bindBtnPageEvent() {
        {#alert("点击了跳转");#}
        $.ajax({
            url: '',
            method: 'post',
            data: {
                "pageNum": 1,
                "pageSize": 10
            },
            dataType: "JSON",
            success: function (res) {
                console.log(res.status);
                {#alert("你好");#}
                {#location.reload();  // 刷新页面#}
                {#alert(res.status + res.content);#}
            }

        });
    }

    // 保存事件
    function bindBtnSaveEvent() {
        $("#saveBtn").click(function () {

            // 清空错误信息
            $("#error-msg").empty();

            if (EDIT_ID) {
                // 编辑
                doEdit();
            } else {
                // 添加
                doAdd();
            }


        });
    }

    // 执行编辑
    function doEdit() {
        // 向后台发送请求（添加的Ajax请求）
        $.ajax({
            url: "edit/" + "?uid=" + EDIT_ID,
            method: "post",
            data: $('#formData').serialize(),
            dataType: "JSON",
            success: function (res) {
                if (res.status) {
                    $("#myModal").modal('hide');
                    // 刷新页面
                    location.reload();
                } else {
                    if (res.tips) {
                        alert(res.tips);
                    } else {
                        // 把错误信息提示在对话框中。
                        $.each(res.error, function (name, errorList) {
                            $("#id_" + name).next().text(errorList[0]);
                        });
                    }

                }
            }
        });
    }

    // 执行添加
    function doAdd() {
        // 向后台发送请求（添加的Ajax请求）
        $.ajax({
            url: "add/" + "?uid=" + EDIT_ID,
            method: "post",
            data: $('#formData').serialize(),
            dataType: "JSON",
            success: function (res) {
                if (res.status) {
                    $("#myModal").modal('hide');
                    // 刷新页面
                    location.reload();
                } else {
                    // 把错误信息提示在对话框中。
                    $.each(res.error, function (name, errorList) {
                        $("#id_" + name).next().text(errorList[0]);
                    });
                }
            }
        });
    }

    // 添加事件（打开模态框）
    function bindBtnAddEvent() {
        $('.add-btn').click(function () {
            // 点击编辑后再点添加，实际会变成ID的添加，所以在这里将正在编辑的ID设置为空
            EDIT_ID = undefined;

            // 清空模态框中的数据
            $("#formData")[0].reset();

            // 打开模态框
            $('#myModal').modal('show');

            // 替换模态框标题
            $("#myModalLabel").text("添加");

        });
    }

    // 删除事件
    function bindBtnDeleteEvent() {
        $(".delete-btn").click(function () {

            // 获取删除按钮的id
            var currentId = $(this).attr("uid");

            // 通过ajax发送当前id到后端进行删除
            $.ajax({
                url: "delete/",
                method: "post",
                data: {
                    "uid": currentId
                },
                dataType: "JSON",
                success: function (res) {
                    {#alert(res.status);#}
                    if (res.status) {
                        // 刷新界面
                        location.reload();
                    }

                }
            });

        });
    }

    // 编辑事件 (打开模态框，根据ID回填)
    function bindBtnEditEvent() {
        $('.edit-btn').click(function () {

            // 清空模态框中的数据
            $("#formData")[0].reset();

            // 获取当前数据ID
            var currentID = $(this).attr("uid");
            EDIT_ID = currentID         // 赋值为全局变量，方便点击保存时，指定ID的数据保存达到编辑的效果

            // 发送Ajax去后端获取当前行的相关数据
            $.ajax({
                url: "edit/",
                method: "get",
                data: {
                    uid: currentID,
                },
                dataType: "JSON",
                success: function (res) {
                    {#console.log(res);#}
                    if (res.status) {
                        // 将数据字典遍历赋值到input class为id_xxx标签值中。
                        $.each(res.data.rows, function (name, value) {
                            $("#id_" + name).val(value);
                        });
                        // 找到id为myModalLabel的标签，将text内容改为编辑
                        $('#myModalLabel').text("编辑");

                        // 打开模态框
                        $('#myModal').modal('show');

                    } else {
                        alert(res.error);
                    }
                }
            })
            // 在对话框中默认看到
        });
    }

</script>


{% block js %}{% endblock %}


</body>
</html>